<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="appUserList">
      <el-table-column label="修改前手机号" align="center" prop="oldPhone"/>
      <el-table-column label="修改后手机号" align="center" prop="phone"/>
      <el-table-column label="修改原因" align="center" prop="reason"/>
      <el-table-column label="修改人" align="center" prop="createBy"/>
      <el-table-column label="修改时间" align="center" prop="createTime"/>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

  </div>
</template>

<script>
import {getPhoneLog} from "@/api/service/appUser/appUser";

export default {
  name: "phoneLog",
  props: {
    upid: {
      type: Number,
      default: '-1'
    }
  },
  components: {},
  data() {
    return {
      src: "/400/400",
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户基本信息-扩展(存放一些不重要但是必要的信息)表格数据
      appUserList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openDetail: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        platformId: this.upid

      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询某用户的手机号码修改记录 */
    getList() {
      if (this.upid) {
        this.loading = true;
        this.queryParams.platformId = this.upid;
        getPhoneLog(this.queryParams).then(response => {
          this.appUserList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    }
  }
}
;
</script>

<style lang="css">
.detail {
  width: 800px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
